<template>
  <div class="lineChart">
    <div class="control1">
      <div class="ctroDay1">
        <span id="span1" class="check" @click="setLineChart('left', '3', '7')">近7天</span>
        <span id="span2" @click="setLineChart('left', '3', '30')">近30天</span>
      </div>
      <div class="ctroDay2">
        <el-from>
          <el-form-item label="日期类型">
            <el-select class="sel1" :span="3" v-model="from.region" style="width: 15%">
              <el-option label="日" value="3" />
              <el-option label="月" value="5" />
              <el-option label="季" value="10" />
              <el-option label="年" value="15" />
            </el-select>
            <el-col :span="1"/>
            <el-col class="sel1" :span="8">
              <el-date-picker v-model="from.startTime" :type="from.datePickerType" placeholder="选择开始日期"
                style="width: 100%" />
            </el-col>
            <el-col :span="1" class="text-center sel1">
              <span class="text-gray-500">-</span>
            </el-col>
            <el-col class="sel1" :span="8">
              <el-date-picker v-model="from.endTime" :type="from.datePickerType" placeholder="选择结束日期"
                style="width: 100%" />
            </el-col>
            <el-button :icon="Search" @click="setLine" />
          </el-form-item>
        </el-from>
      </div>
    </div>
    <div class="title-top">
     {{ titleTop }}{{ lineChartBase.lineTotal }}单
    </div>
    <div id="lineMain"></div>
    <div class="title-bottom">
      <span class="bottm-bj"></span>
      <span class="bottm-num">{{ titleBottom }}</span>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted,reactive, watch,ref } from 'vue'
import { hdRentOrderDateAnalysis, rentOrderLine, mxSaleOrderLine, xdCallbackOrderLine, hdCallbackOrderDateAnalysis, hdSaleOrderDateAnalysis } from '@/api/workbenches/index'
import { Memo, Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import * as echarts from 'echarts'
import { el } from 'element-plus/es/locale'
const props = defineProps({
  // 展示数据类型
  dataType: {
    type: String,
    default: 'zx'
  },
  companyRole: {
    type: String,
    default: 'zx'
  },
  tagName: {
    type: String,
    default: 'zx-rent'
  },
   tabsType: {
    type: Number,
    default: 1
  },
  lineData: {
    type: Object,
    default: () => { }
  }
  // // 列表内容
  // data: {
  //   type: Object,
  //   default: () => { }
  // }
});
watch(() => props.dataType, (newVal, oldVal) => {
  if (newVal != oldVal) {
    setLineChart()
  }
});
watch(() => props.tagName, (newVal, oldVal) => {
  if (newVal != oldVal) {
    setLineChart()
  }
});
watch(() => props.tabsType, (newVal, oldVal) => {
  if (newVal != oldVal) {
    setLineChart()
  }
});
const lineChartBase = reactive({
  lineXAxisData: [],//折线图X轴数据
  barYseriesData: {},
  optionBarChart: '',
  optionLineSeriesChart: [],
  lineTotal: 0,
  thirtyDaysAgo: '',//三十天前
  sevenDaysAgo: '',//七天前
  currentDate: ''//当前时间
});

const titleTop=ref('')
const titleBottom=ref('')
const from = reactive({
  region: '3',
  datePickerType: 'date',
  startTime: '',
  endTime: '',
  comRole: 'zx'
})
watch(() => from.region, (newVal, oldVal) => {
  switch (newVal) {
    case '3':
      from.datePickerType = 'date'
      break;
    case '5':
      from.datePickerType = 'month'
      break;
    case '10':
      from.datePickerType = 'month'
      break;
    case '15':
      from.datePickerType = 'year'
      break;
  }
})
// 获取所需要的时间节点
const geCurrentTime = async () => {
  const currentDate = new Date()
  const thisDay = new Date(currentDate.getTime())
  const sevenDaysAgo = new Date(currentDate.getTime() - (7 * 24 * 60 * 60 * 1000)); //七天前
  const thirtyDaysAgo = new Date(currentDate.getTime() - (30 * 24 * 60 * 60 * 1000)); //3o天前
  lineChartBase.currentDate = thisDay.toISOString().replace(new RegExp('-', 'g'), '');//当前时间
  lineChartBase.sevenDaysAgo = sevenDaysAgo.toISOString().replace(new RegExp('-', 'g'), '');//七天前
  lineChartBase.thirtyDaysAgo = thirtyDaysAgo.toISOString().replace(new RegExp('-', 'g'), '');//三十天前
}
const setLineChart = (valType: string = 'left', dt: string = '3', num: string = '7', time1: string = '20250110', time2: string = '20250122') => {  //val:区别哪里点击
  let optionLineChart = {}
  let lineData = {
    dataType: dt, //3-日 5-月份 10-季度 15-年份
    beginDataTime: '20250110',
    endDataTime: '20250122',
  }
  switch (valType) {
    case 'left':
      if (num == '7') {
        document.getElementById('span1')?.classList.add('check')
        document.getElementById('span2')?.classList.remove('check')
        lineData = {
          dataType: dt, //3-日 5-月份 10-季度 15-年份
          beginDataTime: lineChartBase.sevenDaysAgo?.substring(0, 8),
          endDataTime: lineChartBase.currentDate?.substring(0, 8),
        }

      } else if (num == '30') {
        document.getElementById('span2')?.classList.add('check')
        document.getElementById('span1')?.classList.remove('check')
        lineData = {
          dataType: dt, //3-日 5-月份 10-季度 15-年份
          beginDataTime: lineChartBase.thirtyDaysAgo?.substring(0, 8),
          endDataTime: lineChartBase.currentDate?.substring(0, 8),
        }
      }
      break;
    case 'right':
      lineData = {
        dataType: dt, //3-日 5-月份 10-季度 15-年份
        beginDataTime: time1,
        endDataTime: time2,
      }
      break;
  }


  lineChartBase.lineXAxisData = []
  lineChartBase.optionLineSeriesChart = []
  lineChartBase.lineTotal = 0
  if (props.companyRole === 'zx') {
    if(props.tagName=='zx-rent'){
      if(props.tabsType==1){
        hdRentOrderDateAnalysis(JSON.stringify(lineData)).then(res => {
          res.data.forEach(item => {
            lineChartBase.lineXAxisData.push(item.dataTime)
            lineChartBase.optionLineSeriesChart.push(item.orderQuantity)
            lineChartBase.lineTotal = lineChartBase.lineTotal + item.orderQuantity
          })
          titleTop.value="租箱订单量总计："
          titleBottom.value="租箱订单量"
          optionLineChart = {
            legend: {
              data: []
            },
            xAxis: {
              boundaryGap: false,
              data: Array.from(lineChartBase.lineXAxisData),
              // show: true, // 确保 X 轴显示
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                type: 'line',
                areaStyle: {},
                label: {
                  show: true,
                  position: 'top'
                },
                data: Array.from(lineChartBase.optionLineSeriesChart)
              }
            ]
          }
          echarts.init(document.getElementById('lineMain')).setOption(optionLineChart);
        })
      }else if(props.tabsType==2){
        hdCallbackOrderDateAnalysis(JSON.stringify(lineData)).then(res => {
          res.data.forEach(item => {
            lineChartBase.lineXAxisData.push(item.dataTime)
            lineChartBase.optionLineSeriesChart.push(item.orderQuantity)
            lineChartBase.lineTotal = lineChartBase.lineTotal + item.orderQuantity
          })
          titleTop.value="租箱订单量总计："
          titleBottom.value="租箱订单量"
          optionLineChart = {
            legend: {
              data: []
            },
            xAxis: {
              boundaryGap: false,
              data: Array.from(lineChartBase.lineXAxisData),
              // show: true, // 确保 X 轴显示
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                type: 'line',
                areaStyle: {},
                label: {
                  show: true,
                  position: 'top'
                },
                data: Array.from(lineChartBase.optionLineSeriesChart)
              }
            ]
          }
          echarts.init(document.getElementById('lineMain')).setOption(optionLineChart);
        })
      }
   
    }else if(props.tagName=='zx-buyBox'){
      if(props.tabsType==1){
        hdSaleOrderDateAnalysis(JSON.stringify(lineData)).then(res => {
          res.data.forEach(item => {
            lineChartBase.lineXAxisData.push(item.dataTime)
            lineChartBase.optionLineSeriesChart.push(item.orderQuantity)
            lineChartBase.lineTotal = lineChartBase.lineTotal + item.orderQuantity
          })
          titleTop.value="购箱订单量总计："
          titleBottom.value="购箱订单量"
          optionLineChart = {
            legend: {
              data: []
            },
            xAxis: {
              boundaryGap: false,
              data: Array.from(lineChartBase.lineXAxisData),
              // show: true, // 确保 X 轴显示
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                type: 'line',
                areaStyle: {},
                label: {
                  show: true,
                  position: 'top'
                },
                data: Array.from(lineChartBase.optionLineSeriesChart)
              }
            ]
          }
          echarts.init(document.getElementById('lineMain')).setOption(optionLineChart);
        })
      }else if(props.tabsType==2){
          mxSaleOrderLine(JSON.stringify(lineData)).then(res => {
            res.data.forEach(item => {
              lineChartBase.lineXAxisData.push(item.dataTime)
              lineChartBase.optionLineSeriesChart.push(item.orderQuantity)
              lineChartBase.lineTotal = lineChartBase.lineTotal + item.orderQuantity
            })
            titleTop.value="售箱订单量总计："
            titleBottom.value="售箱订单量"
            optionLineChart = {
              title: {
                },
              legend: {
                data: []
              },
              xAxis: {
                boundaryGap: false,
                data: Array.from(lineChartBase.lineXAxisData),
                // show: true, // 确保 X 轴显示
              },
              yAxis: {
                type: 'value'
              },
              series: [
                {
                  type: 'line',
                  areaStyle: {},
                  label: {
                    show: true,
                    position: 'top'
                  },
                  data: Array.from(lineChartBase.optionLineSeriesChart)
                }
              ]
            }
            echarts.init(document.getElementById('lineMain')).setOption(optionLineChart);
          })
      }
      
    } 
  } else if (props.companyRole === 'putBox') {
    if(props.tagName=='putBox-rent'){
       if(props.tabsType==1){
        rentOrderLine(JSON.stringify(lineData)).then(res => {
          res.data.forEach(item => {
            lineChartBase.lineXAxisData.push(item.dataTime)
            lineChartBase.optionLineSeriesChart.push(item.orderQuantity)
            lineChartBase.lineTotal = lineChartBase.lineTotal + item.orderQuantity
          })
          titleTop.value="出租箱订单量总计："
          titleBottom.value="出租箱订单量"
          optionLineChart = {
            legend: {
              data: []
            },
            xAxis: {
              boundaryGap: false,
              data: Array.from(lineChartBase.lineXAxisData),
              // show: true, // 确保 X 轴显示
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                type: 'line',
                areaStyle: {},
                label: {
                  show: true,
                  position: 'top'
                },
                data: Array.from(lineChartBase.optionLineSeriesChart)
              }
            ]
          }
          echarts.init(document.getElementById('lineMain')).setOption(optionLineChart);
        })
      }else if(props.tabsType==2){
        xdCallbackOrderLine(JSON.stringify(lineData)).then(res => {
          res.data.forEach(item => {
            lineChartBase.lineXAxisData.push(item.dataTime)
            lineChartBase.optionLineSeriesChart.push(item.orderQuantity)
            lineChartBase.lineTotal = lineChartBase.lineTotal + item.orderQuantity
          })
          titleTop.value="出租箱订单量总计："
          titleBottom.value="出租箱订单量"
          optionLineChart = {
            legend: {
              data: []
            },
            xAxis: {
              boundaryGap: false,
              data: Array.from(lineChartBase.lineXAxisData),
              // show: true, // 确保 X 轴显示
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                type: 'line',
                areaStyle: {},
                label: {
                  show: true,
                  position: 'top'
                },
                data: Array.from(lineChartBase.optionLineSeriesChart)
              }
            ]
          }
          echarts.init(document.getElementById('lineMain')).setOption(optionLineChart);
        })
      }
      

    }else if(props.tagName=='putBox-buyBox'){
       if(props.tabsType==1){
        hdSaleOrderDateAnalysis(JSON.stringify(lineData)).then(res => {
          res.data.forEach(item => {
            lineChartBase.lineXAxisData.push(item.dataTime)
            lineChartBase.optionLineSeriesChart.push(item.orderQuantity)
            lineChartBase.lineTotal = lineChartBase.lineTotal + item.orderQuantity
          })
          titleTop.value="购箱订单量总计："
          titleBottom.value="购箱订单量"
          optionLineChart = {
            legend: {
              data: []
            },
            xAxis: {
              boundaryGap: false,
              data: Array.from(lineChartBase.lineXAxisData),
              // show: true, // 确保 X 轴显示
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                type: 'line',
                areaStyle: {},
                label: {
                  show: true,
                  position: 'top'
                },
                data: Array.from(lineChartBase.optionLineSeriesChart)
              }
            ]
          }
          echarts.init(document.getElementById('lineMain')).setOption(optionLineChart);
        })
      }else if(props.tabsType==2){
          mxSaleOrderLine(JSON.stringify(lineData)).then(res => {
            res.data.forEach(item => {
              lineChartBase.lineXAxisData.push(item.dataTime)
              lineChartBase.optionLineSeriesChart.push(item.orderQuantity)
              lineChartBase.lineTotal = lineChartBase.lineTotal + item.orderQuantity
            })
            titleTop.value="售箱订单量总计："
            titleBottom.value="售箱订单量"
            optionLineChart = {
              title: {
                },
              legend: {
                data: []
              },
              xAxis: {
                boundaryGap: false,
                data: Array.from(lineChartBase.lineXAxisData),
                // show: true, // 确保 X 轴显示
              },
              yAxis: {
                type: 'value'
              },
              series: [
                {
                  type: 'line',
                  areaStyle: {},
                  label: {
                    show: true,
                    position: 'top'
                  },
                  data: Array.from(lineChartBase.optionLineSeriesChart)
                }
              ]
            }
            echarts.init(document.getElementById('lineMain')).setOption(optionLineChart);
          })
      }
    }
    
  }

}
//根据获取 时间类型和开始结束时间设置折线图
const setLine = async () => {
  const starTime = new Date(from.startTime);
  const endTime = new Date(from.endTime);
  // 年份
  const startYear = starTime.getFullYear()
  const endYear = endTime.getFullYear()
  //月份 
  const startMonth = String(starTime.getMonth() + 1).padStart(2, '0')
  const endMonth = String(endTime.getMonth() + 1).padStart(2, '0');
  //季度
  let startQuarter = '';
  let endQuarter = '';
  if (startMonth == '01' || startMonth == '02' || startMonth == '03') {
    startQuarter = '1'
  } else if (startMonth == '04' || startMonth == '05' || startMonth == '06') {
    startQuarter = '2'
  } else if (startMonth == '07' || startMonth == '08' || startMonth == '09') {
    startQuarter = '3'
  } else if (startMonth == '10' || startMonth == '11' || startMonth == '12') {
    startQuarter = '4'
  }
  if (endQuarter == '01' || endMonth == '02' || endMonth == '03') {
    endQuarter = '1'
  } else if (endMonth == '04' || endMonth == '05' || endMonth == '06') {
    endQuarter
  } else if (endMonth == '07' || endMonth == '08' || endMonth == '09') {
    endQuarter = '3'
  } else if (endMonth == '10' || endMonth == '11' || endMonth == '12') {
    endQuarter = '4'
  }

  const startDay = String(starTime.getDate()).padStart(2, '0');
  const endDay = String(endTime.getDate()).padStart(2, '0');
  if (from.region == '3') { //日
    let startT = startYear + startMonth + startDay
    let endT = endYear + endMonth + endDay
    setLineChart('right', '3', '', startT, endT)
  } else if (from.region == '5') {//月
    let startT = startYear + startMonth
    let endT = endYear + endMonth
    setLineChart('right', '5', '', startT, endT)
  } else if (from.region == '10') { //季度
    let startT = startYear + startQuarter
    let endT = endYear + endQuarter
    setLineChart('right', '10', '', startT, endT)
  } else if (from.region == '15') { //年
    let startT = startYear
    let endT = endYear
    setLineChart('right', '15', '', startT, endT)
  } else {
    ElMessage.error('请重新选择时间类型')
  }

}


const setLineChart1 = (type: string) => {
  console.log(type, props.dataType)
  // dataType: '3', //3-日 5-月份 10-季度 15-年份
  // beginDataTime: agoTiemes,
  // endDataTime: chartData.currentDate.substring(0, 8),
  let lineData = {
    dataType: '3', //3-日 5-月份 10-季度 15-年份
    beginDataTime: '',
    endDataTime: '',
  }
  if (type == '3') {
    lineData = {
      dataType: props.lineData.region, //3-日 5-月份 10-季度 15-年份
      beginDataTime: props.lineData.startDate,
      endDataTime: props.lineData.endDate,
    };
  } else if (type == '5') {
    lineData = {
      dataType: '5', //3-日 5-月份 10-季度 15-年份
      beginDataTime: props.lineData.startDate,
      endDataTime: props.lineData.endDate,
    };

  } else if (type == '10') {
    lineData = {
      dataType: '10', //3-日 5-月份 10-季度 15-年份
      beginDataTime: props.lineData.startDate,
      endDataTime: props.lineData.endDate,
    };
  } else if (type == '15') {
    lineData = {
      dataType: '15', //3-日 5-月份 10-季度 15-年份
      beginDataTime: props.lineData.startDate,
      endDataTime: props.lineData.endDate,
    };
  }
}
onMounted(() => {
  geCurrentTime()
  setLineChart()
})



</script>
<style lang="scss" scoped>
#lineMain {
  width: 80%;
  margin-left: 10%;
  height: 500px;
}

.control1 {
  margin-top: 30px;
  margin-bottom: 20px;
  height: 60px;
}

.ctroDay1 {
  width: 30%;
  height: 50px;
  float: left;
}

.ctroDay1 span {
  display: inline-block;
  float: left;
  width: 30%;
  height: 35px;
  line-height: 35px;
  background-color: alice#2158F3;
  text-align: center;
  cursor: pointer;
}

.ctroDay1 span:first-child {
  margin-left: 20%;
  display: inline-block;
  float: left;
  width: 30%;
  background-color: alice#2158F3;
}

.ctroDay2 {
  width: 70%;
  float: left;
}

.lineChart div span {
  display: block;
}

.title {
  width: 200px;
  margin: auto;
  height: 100px;
  text-align: center;
  background-color: rgb(157, 170, 181);
  border-radius: 15px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  padding: 20px 0;
}

.check {
  color: #3382F6;
  border: 1px solid #3382F6;
  background-color: #d3e2f8 !important;
  border-radius: 3px;
}
.lineChart{
  width: 100%;
}
.title-top{
  text-align: right;
  font-size: 14px;
  color: rgb(155, 155, 155)
}
.title-bottom{
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.title-bottom .bottm-num{
  padding-left: 5px;
  line-height: 20px;
}
.title-bottom .bottm-bj{
  width: 16px;
  height: 4px;
  background:#2158F3 ;
  border-radius: 5px;
}
</style>